In this new section of the course, we won't be focusing on specific electron modules, but important
or useful implementations of these modules on top of that will also see how to implement native HTML
five APIs within our app.
Remember when building electron apps, we're working in one of the latest versions of chromium, meaning
pretty much all of the HTML5 APIs is supported inside of a browser window, something we should definitely
take full advantage of.
The first topic will cover then not being an HTML5 API, but an electron one is off screen rendering.
Electron has a dedicated page explaining this concept, but essentially it means to load and render
content into a browser window on a separate thread, meaning it's not visible and therefore happens
faster whilst using less resources.
A perfect solution for, say, rendering a page onto a canvas element or even a 3D context.
Off screen rendering can be run in two modes by default using the GPU or the graphics card, or alternatively
using the system CPU only if you require 3D CSS animations during rendering, you'll want to leave it
as the default.
So using the GPU.
But should your app not require the rendering of animations, disabling the use of the GPU in favor
of the CPU only is the preferred faster option.
I'll demonstrate the latter to start.
We'll tell our app to disable hardware acceleration so only using the CPU in mind dodges before creating
any browser windows.
Call on the app instance.
Disable hardware acceleration.
Then to render this main window off screen, we can sit on a chair preferences off screen, true.
Very importantly, note that we are setting the Web content of this browser window to be rendered off
screen.
The window itself belongs to the main process and cannot be run on a separate thread like the rendering
of the Web content.
This will make more sense in a second.
Then, instead of loading index or HTML, I'll change this window to instead load a u rl https electron
sorg.
That's basically at this main window will now load and render its web content, the electron JS homepage,
but we won't be able to see it.
So to make sure it's working, we can get the window title once it's done.
Loading lesson on main windows web contents.
Four dead finish load passing a callback.
In which our log out the window title with main window target title, safeness this, the app relaunches
and we get this flameless window with its web content being rendered off screen as per this message
check for the title in the terminal where we see the title of the electron homepage locked out.
So everything worked as expected.
Now, in most cases, we're not going to want this window with off screen content to be visible either.
So let's also hide the window itself, setting on the browser window options show to false, then not
being able to see the browser window itself.
We might as well also close it once it's done loading and we've got everything we need.
Comment out this close listener calling after the did finish load event fires main window dot close
and setting one window to null.
Ideally we would have probably just quit the entire Appia, but with node one running that doesn't make
any sense.
Save this to check.
It still works.
Nothing happens now as there's no window to focus to.
But in the terminal we still get that title locked out.
OK, so rendering some content is great, but 99 percent of the time off screen rendering will be used
to get rendered versions of the content.
To do this, we can listen for the paint event on the off screen where contents main window dot web
content on paint.
The event call back, providing us with the event object dirty, which is the size and bound of the
area that was rendered, and lastly, a native image instance of the rendered content paint, unlike
did finish load fires each and every time the content rendering changes.
This happens multiple times when loading the content, for example.
So to capture the content loading stages in images, I'll save a screenshot each time the paint event
fires, assigning to screenshot image this native image instance of the rendered content talked to PMG
and write that image to my desktop using notes FS module.
F-stop right file.
Get the desktop path with a laptop, get path.
Slash screenshot, underscore I, which will create in a second dot PMG the data we are writing to this
file being our screenshot PMG image and to handle any errors POS console dialog as the callback create
i.e. a simple no increment for each screenshot starting at one and increment after each point.
We also need to require the FS module.
Const S equals require EFS, save this and quickly move over to the desktop where we get those screenshots
as the Web content is rended, seeing each and every point from start to finish, a simple but very
powerful technique for performing fast content rendering as a background process.